@import './mixin.scss';
@import './transition.scss';
@import './sidebar.scss';
@import './app.scss';
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  background-image: url('/src/assets/images/main-bg.png'), linear-gradient(180deg, #0a2551, #0a2551);
  background-size: 100% 100%;
  font-size: 14px !important;
}

@media screen and (max-width: 2560px) {
    body {
        font-size: 16px !important;
    }
}

@media screen and (max-width: 1920px) {
    body {
        font-size: 14px !important;
    }
}


label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

.layui-input-disabled input[disabled],
.layui-input-disabled select[disabled] {
  background-color: #f3f3f3 !important;
}

#app {
  position: fixed;
  height: 100%;
  width: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.margin-lr {
  margin-left: 15px;
  margin-right: 15px;
}
.margin-lr-lg {
  margin-left: 25px;
  margin-right: 25px;
}
.margin-lr-xl {
  margin-left: 35px;
  margin-right: 35px;
}
// .app-wrapper{
//   &::before{
//     content: "";
//     display: block;
//     height: 60px;
//   }
// }

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.h100 {
  height: 100%;
}

label {
  font-weight: 400 !important;
}

.text-cut {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.padding-lr-sm {
  padding-left: 5px;
  padding-right: 5px;
}
.padding-lr {
  padding-left: 10px;
  padding-right: 10px;
}
.padding-lr-lg {
  padding-left: 20px;
  padding-right: 20px;
}
.padding-lr-xl {
  padding-left: 30px;
  padding-right: 30px;
}
.margin-right-sm {
  margin-right: 10px;
}
.padding-left-xl {
  padding-left: 30px;
}
.padding-left {
  padding-left: 10px;
}
.padding-left-lg {
  padding-left: 20px;
}
.padding-right {
  padding-right: 15px;
}
.padding-right-lg {
  padding-right: 20px;
}
.padding-right-xl {
  padding-right: 30px;
}

.flex-sub {
  flex: 1;
}

.flex-twice {
	flex: 2;
}

.flex-treble {
	flex: 3;
}
.mt40 {
  margin-top: 40px;
}
.cursor-pointer {
  cursor: pointer;
}

.dashed-bottom {
  border-bottom: 1px dashed #e1e1e1;
}
.text-white {
  color: rgba(255,255,255,0.9) !important;
}
.text-grays {
  color: #666;
}

.text-green {
  color: #33d695;
}

.text-right {
  text-align: right;
}

.text-underline{
	text-decoration: underline
}

.shadow {
  box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.05);
}

// 滚动条优化
::-webkit-scrollbar-track-piece {
  background-color: #162146;
  -webkit-border-radius: 0;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: #0d3567;
  -webkit-border-radius: 6px;
  outline: 2px solid #0d3567;
  outline-offset: -2px;
  border: 2px solid #0d3567;
  filter: alpha(opacity = 50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
::-webkit-scrollbar-thumb:hover {
  height: 50px;
  background-color: #162146;
  -webkit-border-radius: 6px;
}

// 自定义弹窗样式
.margin-right-xs {
  margin-right: 5px;
}
.bg-gray {
  background-color: #fafafa !important;
}

.bg-grays {
  background-color: #909399;
}
.bg-blue {
  background-color: #409eff;
}
.bg-white {
  background-color: #fff;
}
.bg-brown {
  background-color: #a16930;
}
.bg-green {
  background-color: #39943a;
}
.bg-blues {
  background-color: #648dab;
}
.bg-gradual-red {
  background-image: linear-gradient(45deg, #f43f3b, #ec008c);
  color: #ffffff;
}

.bg-gradual-orange {
  background-image: linear-gradient(45deg, #ff9700, #ed1c24);
  color: #ffffff;
}

.bg-gradual-green {
  background-image: linear-gradient(45deg, #39b54a, #8dc63f);
  color: #ffffff;
}

.bg-gradual-purple {
  background-image: linear-gradient(45deg, #9000ff, #5e00ff);
  color: #ffffff;
}

.bg-gradual-pink {
  background-image: linear-gradient(45deg, #ec008c, #6739b6);
  color: #ffffff;
}

.bg-gradual-blue {
  background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
  color: #ffffff;
}

.radius {
  border-radius: 8px;
}
.radius-sm {
  border-radius: 6px;
}
.content-wraper {
  padding: 0 15px;
}

.pages {
  margin-top: 20px;
}

p {
  margin: 0 !important;
}

.text-center {
  text-align: center;
}

.w100 {
  width: 100%;
}

.margin-top {
  margin-top: 10px;
}

.margin-top-sm {
  margin-top: 5px;
}

.margin-top-lg {
  margin-top: 20px;
}
.margin-top-xl {
  margin-top: 30px;
}
.margin-top-xxl {
  margin-top: 40px;
}
.margin-left-sm {
  margin-left: 5px;
}

.margin-left {
  margin-left: 10px;
}

.margin-right {
  margin-right: 10px;
}

.margin-right-lg {
  margin-right: 20px;
}
.margin-right-xl {
  margin-right: 30px;
}
.margin-right-xxl {
  margin-right: 40px;
}
.margin-left-lg {
  margin-left: 20px;
}

.margin-left-xl {
  margin-left: 30px;
}
.margin-left-xxl {
  margin-left: 40px;
}
.padding-sm {
  padding: 5px;
}
.padding {
  padding: 10px;
}
.padding-lg {
  padding: 20px;
}
.padding-top {
  padding-top: 10px;
}
.padding-top-sm {
  padding-top: 5px;
}
.padding-tb-xs {
  padding-top: 2px;
  padding-bottom: 2px;
}

.padding-tb-sm {
  padding-top: 5px;
  padding-bottom: 5px;
}
.padding-tb {
  padding-top: 10px;
  padding-bottom: 10px;
}

.padding-lr-lg {
  padding-left: 20px;
  padding-right: 20px;
}
.padding-lr-xl {
  padding-left: 30px;
  padding-right: 30px;
}
.padding-tb-lg {
  padding-top: 20px;
  padding-bottom: 20px;
}
.padding-tb-xl {
  padding-top: 30px;
  padding-bottom: 30px;
}
.padding-xxxl {
  padding: 50px 50px 10px 50px;
}

.block {
  display: block;
}

.dashed {
  border: 1px dashed #e1e1e1;
}

.solid {
  border: 1px solid rgba(255,255,255,0.4);;
}

.solid-top {
  border-top: 1px solid rgba(255,255,255,0.4);;
}

.solid-bottom {
  border-bottom: 1px solid rgba(255,255,255,0.4);;
}
.solid-left {
  border-left: 1px solid rgba(255,255,255,0.4);;
}
.solid-right {
  border-right: 1px solid rgba(255,255,255,0.4);;
}


.solid-b {
  border: 1px solid rgba(0,0,0,0.1);;
}

.solid-top-b  {
  border-top: 1px solid rgba(0,0,0,0.1);;
}

.solid-bottom-b  {
  border-bottom: 1px solid rgba(0,0,0,0.1);;
}
.solid-left-b  {
  border-left: 1px solid rgba(0,0,0,0.1);;
}
.solid-right-b  {
  border-right: 1px solid rgba(0,0,0,0.1);;
}

.line-white {
  border-color: #ffffff;
}
.line-blue {
  border-color: #c2e3ff;
}

.padding-tb {
  padding-top: 10px;
  padding-bottom: 10px;
}

.padding-bottom {
  padding-bottom: 10px;
}
.padding-bottom-sm {
  padding-bottom: 5px;
}
.padding-bottom-lg {
  padding-bottom: 20px;
}
.padding-bottom-xl {
  padding-bottom: 30px;
}
.text-black {
  color: #333;
}
.text-gray {
  color: #999;
}
.text-blue {
  color: #1b7cbc;
}
.text-blue2 {
  color: #21b0fe;
}
.text-red {
  color: #f23535;
}

.text-orange {
  color: #ff8600;
}

.margin-bottom-lg {
  margin-bottom: 20px;
}
.margin-bottom-xl {
  margin-bottom: 30px;
}
.margin-bottom-xxl {
  margin-bottom: 40px;
}
.margin-bottom {
  margin-bottom: 10px;
}

.text-bold {
  font-weight: 700;
}

.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.align-stretch {
  align-items: stretch;
}

.cursor {
  cursor: pointer;
}
.cursor-no {
  cursor: not-allowed !important;
}
.row-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.row-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.row-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pointer-events {
  pointer-events: none;
}
@for $i from 10 through 20 {
  .m#{$i} {
    margin: #{$i}px;
  }
  .mr#{$i} {
    margin-right: #{$i}px;
  }
  .ml#{($i)} {
    margin-left: #{$i}px;
  }
  .mt#{($i)} {
    margin-top: #{$i}px;
  }
  .mb#{($i)} {
    margin-bottom: #{$i}px;
  }
  .p#{($i)} {
    padding: #{$i}px;
  }
  .pt#{($i)} {
    padding-top: #{$i}px;
  }
  .pb#{($i)} {
    padding-bottom: #{$i}px;
  }
  .pl#{($i)} {
    padding-left: #{$i}px;
  }
  .pr#{($i)} {
    padding-right: #{$i}px;
  }
}

.suffix-btn {
  border-radius: 0 3px 3px 0 !important;
}

.leftnav .layui-input-suffix {
	padding: 0 !important;
}

.layui-col-space20 > * {
  padding: 0;
}

.hidden {
	overflow: hidden;
}

@media screen and (max-width: 2560px) {
   .text-md {
     font-size: 18px;
   }
   
   .text-df {
     font-size: 18px;
   }
   
   .text-sm {
     font-size: 16px;
   }
   
   .text-xl {
     font-size: 22px;
   }
   
   .text-xxl {
     font-size: 24px;
   }
   .text-xxxl {
     font-size: 28px;
   }
   
   .text-lg {
     font-size: 20px;
   }
}

@media screen and (max-width: 1920px) {
   .text-md {
     font-size: 16px;
   }
   
   .text-df {
     font-size: 16px;
   }
   
   .text-sm {
     font-size: 14px;
   }
   
   .text-xl {
     font-size: 20px;
   }
   
   .text-xxl {
     font-size: 22px;
   }
   .text-xxxl {
     font-size: 26px;
   }
   
   .text-lg {
     font-size: 18px;
   }
}

